<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bullet</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .video {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 800px;
            background-color: rgba(0, 0, 0, 0.2);
        }

        #input {
            width: 750px;
            height: 50px;
            font-size: 20px;
            padding-left: 12px;
        }

        #send {
            height: 50px;
            font-size: 20px;
            vertical-align: bottom;
            padding: 12px;
        }

        .bullet {
            position: absolute;
            top: 0;
            left: 1200px;
            border: 1px solid red;
            /* background-color: red; */
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="video" id="bullet-container">
                <template v-if="bulletList.length">
                    <span class="bullet" v-for="(item,index) in bulletList"
                        v-bind:style="{left:item.left+'px',top:item.top+'px',color:item.color}">
                        {{item.input}}</span>
                </template>
    
            </div>
            <div>
                <input type="text" id="input" placeholder="输入弹幕" v-model="msg" @keyup.enter="oBtnClick">
                <button id="send" v-on:click="oBtnClick">发送</button>
  
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                // 获取input中的输入
                msg: "",
                // 存取弹幕的数组
                bulletList: [],
                // 定时器初始化
                timer: null,
            },
            methods: {
                oBtnClick(e) {

                    // 获取input中的内容进行处理
                    let inputValue = this.msg.trim();
                    // 输入是否为空
                    if (inputValue) {
                        console.log(e);
                        // let left = e.pageX;
                        let left = 1200;
                        let top = getRandom(200);
                        let color = getRandomColor()
                        

                        this.bulletList.push({
                            // 弹幕的位置调整
                            // left:0,
                            // top:0,
                            // 弹幕的颜色
                            // color: "red",
                            input: inputValue,
                            left: left,
                            top: top,
                            color: color,
                            speedStep: getRandom(5) + 3

                        });
                        if (!this.timer) {
                            this.timer = setInterval(draw, 17)
                        }
                        this.msg = "";
                        // 获取1~n的随机数
                        function getRandom(n) {
                            let seed = Math.random();
                            return Math.floor(seed * n + 1);
                        };
                        // 绘制每一帧的画面，人眼大概能够识别显示连续的画面，是60HZ 大约17ms
                        function draw() {
                            for (let i = 0; i < app.bulletList.length; i++) {
                                let left = app.bulletList[i].left;
                                left -= app.bulletList[i].speedStep;
                                
                                app.bulletList[i].left = left;
                                // 获取弹幕的宽度
                                // let width = bulletList[i].dom.getBoundingClientRect().width;
                                if (app.bulletList[i].left < -10) {
                                    // 删除数组元素
                                    app.bulletList.splice(i, 1);
                                    i--;
                                }
                            }

                            // 清除定时器
                            if (app.bulletList.length < 1) {
                                clearInterval(app.timer);
                                app.timer = null;
                            }
                            console.log("绘制");
                        };
                        // 获取随机颜色
                        function getRandomColor() {
                            let r = Math.floor(Math.random() * 255 + 1);
                            let g = Math.floor(Math.random() * 255 + 1);
                            let b = Math.floor(Math.random() * 255 + 1);
                            return "rgb(" + r + "," + g + "," + b + ")";
                        };
                    }
                },
            },


        });

    </script>
</body>

</html>